<template>
  <!-- vue3页面 -->
  <a-card title="双代会请示" :bodyStyle="{ padding: '20px 10px' }">
    <a-form
      ref="formRef"
      name="requestForm"
      class="ant-advanced-search-form"
      :model="formState"
      @finish="onFinish"
      :label-col="{ style: { width: '100px' } }"
    >
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            name="session"
            label="届数"
            :rules="[{ required: true }]"
          >
            <MySelect
              v-model:value="formState.session"
              title="届数"
              :selectData="sessionSelectData"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item name="sort" label="次数" :rules="[{ required: true }]">
            <MySelect
              v-model:value="formState.sort"
              title="次数"
              :selectData="sortSelectData"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            name="conferenceName"
            label="会议名称"
            :rules="[{ required: true }]"
          >
            <a-input
              v-model:value="formState.conferenceName"
              placeholder="请填写会议名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item name="type" label="类型" :rules="[{ required: true }]">
            <a-radio-group v-model:value="formState.type" button-style="solid">
              <a-radio-button value="换届会">换届会</a-radio-button>
              <a-radio-button value="届中会">届中会</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            name="unit"
            label="申请单位"
            :rules="[{ required: true }]"
          >
            <a-input
              v-model:value="formState.unit"
              placeholder="工会"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            name="inUnion"
            label="所在工会"
            :rules="[{ required: true }]"
          >
            <a-input
              a-input
              v-model:value="formState.inUnion"
              placeholder="机关分工会"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            name="conferenceTime"
            label="会议时间"
            :rules="[{ required: true }]"
          >
            <a-date-picker
              valueFormat="YYYY-MM-DD hh:mm:ss"
              style="width: 100%"
              show-time
              placeholder="选择会议时间"
              v-model:value="formState.conferenceTime"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item name="requestTime" label="申请时间">
            <a-input
              a-input
              v-model:value="formState.requestTime"
              placeholder="2023-10-20"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col>
          <a-form-item
            name="conferenceAgenda"
            label="会议议程"
            :rules="[{ required: true }]"
          >
            <a-textarea
              v-model:value="formState.conferenceAgenda"
              placeholder="请输入正文"
              :auto-size="{ minRows: 10, maxRows: 10 }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col>
          <a-form-item name="remark" label="备注" :rules="[{ required: true }]">
            <a-textarea
              v-model:value="formState.remark"
              placeholder="请输入备注"
              :auto-size="{ minRows: 10, maxRows: 10 }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col>
          <a-form-item name="files" label="请示附件">
            <a-upload
              v-model:file-list="formState.files"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              list-type="picture"
            >
              <a-button> upload </a-button>
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" justify="end">
        <a-col :span="4">
          <a-button
            danger
            style="padding: 0 30px; margin-right: 20px"
            @click="resetForm"
            >重置</a-button
          >
          <a-button type="primary" style="padding: 0 30px" html-type="submit"
            >提交</a-button
          >
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormInstance } from "ant-design-vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
const formRef = ref<FormInstance>();

const formState = reactive({
  session: "",
  sort: "",
  conferenceName: "",
  type: "届中会",
  unit: "工会",
  inUnion: "机关分工会",
  conferenceTime: "",
  requestTime: "2023-10-30",
  conferenceAgenda: "",
  remark: "",
  files: [],
});
const sessionSelectData = [
  {
    value: "一届",
    label: "一届",
  },
  {
    value: "二届",
    label: "二届",
  },
  {
    value: "三届",
    label: "三届",
  },
  {
    value: "四届",
    label: "四届",
  },
  {
    value: "五届",
    label: "五届",
  },
];
const sortSelectData = [
  {
    value: "一次",
    label: "一次",
  },
  {
    value: "二次",
    label: "二次",
  },
  {
    value: "三次",
    label: "三次",
  },
  {
    value: "四次",
    label: "四次",
  },
  {
    value: "五次",
    label: "五次",
  },
];
const onFinish = (values: any) => {
  console.log(values);
};
const resetForm = () => {
  formRef.value?.resetFields();
};
</script>

<style scoped lang="less">
:deep(.ant-radio-button-wrapper) {
  margin-right: 15px;
}
</style>
